<template>
  <Layout>
    <section slot="search" class="title">
      <span>大户补贴资金一般实行一次性兑付，<br>也可按规定在此设置为分批统一支付</span>
      <a-button @click="handlerAdd" type="primary">添加新的批次</a-button>
    </section>
    <!-- 产品列表 -->
    <a-table
      :dataSource="tableData"
      :columns="tableColumns"
      :rowKey="(record) => record.s_a_id"
      :customRow="customTableRow"
      :pagination="false"
      bordered
    >
      <template slot="batch_id" slot-scope="row, record, index">
        第{{index ===tableData.length - 1 ? '??' : index + 1}}批
      </template>
      <template slot="batch_type" slot-scope="row, record">
        <!-- <a-select v-model="record.batch_type" v-if="record.batch_type !== 'remain'">
          <a-select-option  :value="item.value" v-for="item in PayMethods" :key="item.value">{{item.label}}</a-select-option>
        </a-select> -->
        {{getLabel(record.batch_type, PayMethods)}}
        <!-- <template v-else>
          <div>
            兑付剩余余额
          </div>
        </template> -->
      </template>

      <template slot="batch_num" slot-scope="row, record, index">
        <!-- <template v-if="record.batch_type !== 'remain'">
          <a-input v-model="record.batch_num" style="text-align: center">
            <span slot="addonAfter">{{
              record.batch_type === '2' ? '元' : '%'
            }}</span>
          </a-input>
        </template> -->
        <template>
          <!-- <div>
            {{record.batch_num}} %
          </div> -->
          {{ record.batch_type === 'remain' ? '约' : '' }} {{record.batch_num}} {{['2', '3'].includes(record.batch_type) ? '元/亩' : '%'}}
        </template>
      </template>

      <!-- 按钮区 -->
      <template slot="action" slot-scope="row, record, index" v-if="record.batch_type !== 'remain'">
        <a-button
          v-if="hasEditProject"
          type="link"
          size="small"
          @click="tableEdit(row)"
          >[{{ row.batch_id ? '修改' : '保存' }}]</a-button
        >

        <a-popconfirm
          :title="`您确认删除该批次？`"
          ok-text="确认"
          cancel-text="取消"
          @confirm="handlerDel(row, index)"
        >
          <a-button
            type="link"
            size="small"
          >[删除]</a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <a-modal
      :visible="visible"
      :title="visibleTitle"
      centered
      @cancel="visible = false"
      @ok="handleSubmit"
    >
      <custom-form
        ref="custom-form"
        class="custom-form"
        v-model="currentRow"
        :FormList="formColumns"
        :mode="formMode"
        v-bind="formItemLayout"
        layout="horizontal"
      >
        <template slot="batch_num" slot-scope="{params}">
          <a-input v-model="params.batch_num">
            <span slot="addonAfter" v-if="params.batch_type">{{
              ['2', '3'].includes(params.batch_type) ? '元/亩' : '%'
            }}</span>
          </a-input>
        </template>
      </custom-form>
      
      <!-- <section slot="footer"> -->
      <!-- </section> -->
    </a-modal>

    <!-- 产品列表分页器 -->
    <!-- <a-pagination
      slot="paging"
      :pageSizeOptions="pageSizes"
      :total="total"
      showSizeChanger
      :pageSize="pageSize"
      v-model="currentPage"
      @showSizeChange="changePageSize"
      @change="changePage"
    >
    </a-pagination> -->
  </Layout>
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import { State, Mutation, Getter, namespace } from 'vuex-class'
import EventsMixin from '@/mixin/events'
import { TableMixin, AuthMixin } from '@/mixin'

import { TableLayout } from '@/layouts'
import CustomForm from '@/components/src/Form'
import { userServices, IAdmin } from '@/common/services'
import { userModule } from '@/store/modules/user'
import { commonServices } from '@/common/services/common'
import { memberRole, PayUnitType, PayUnitTypeEnum } from '@/common/enum'
import { subsidyServices, ISubsidyStandard } from '@/common/services/subsidy'

const PayMethods = [
  {
    label: '按补贴金额比例',
    value: '1',
    remark: '自动计算剩余兑付金额'
  },
  {
    label: '按照指定标准兑付',
    value: '2',
    remark: '自动计算剩余兑付金额'
  },
  {
    label: '按照独立标准兑付',
    value: '3',
    remark: '不自动计算剩余兑付金额'
  },
  {
    label: '兑付剩余余额',
    value: 'remain',
  },
]

@Component({
  components: {
    Layout: TableLayout,
    CustomForm,
  },
})
export default class AdminList extends Mixins(
  EventsMixin,
  TableMixin,
  AuthMixin
) {
  @Prop({
    type: String,
  })
  public sid!: string

  get hasEditProject() {
    return userModule.hasEditProject
  }

  get isLarge() {
    return userModule.isLarge
  }

  get PayMethods() {
    return PayMethods
  }

  public isShowIndexColumn = false

  public commonParams = {
    s_a_id: '',
  }

  public formItemLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  }

  // 产品列表搜索条件
  public tableSearch = {}

  // 产品列表表格信息
  public columns = [
    // {
    //   title: '批次',
    //   dataIndex: 'batch_id',
    //   key: 'batch_id',
    //   scopedSlots: { customRender: 'batch_id' },
    //   width: 80,
    //   form: {
    //     type: 'a-input',
    //     placeholder: '请输入批次号',
    //     disabled: true,
    //   },
    // },
    {
      title: '批次',
      dataIndex: 'value',
      key: 'value',
      // scopedSlots: { customRender: 'batch_id' },
      width: 80
    },
    {
      title: '发放类型',
      dataIndex: 'batch_type',
      key: 'batch_type',
      scopedSlots: { customRender: 'batch_type' },
      width: 100,
      form: {
        type: 'a-select',
        placeholder: '请选择发放类型',
        validate: '*',
        dict: PayMethods.slice(0, 3)
      },
    },
    {
      title: '发放标准',
      dataIndex: 'batch_num',
      key: 'batch_num',
      align: 'right',
      scopedSlots: { customRender: 'batch_num' },
      width: 100,
      form: {
        type: 'a-input',
        slot: 'batch_num',
        validate: '*',
        placeholder: '请输入发放金额/比例',
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 80,
      scopedSlots: { customRender: 'action' },
    },
  ]

  public tableApi = {
    list: subsidyServices.getPayBatchLists,
    add: subsidyServices.updatePayBatch,
    edit: subsidyServices.updatePayBatch,
    del: subsidyServices.deletePayBatch
    // edit: subsidyServices.getPayBatchLists,
  }

  @Watch('sid', { immediate: true })
  public changeSid() {
    if (!this.sid) return
    this.commonParams.s_a_id = this.sid
    this.getData()
  }

  public async getData() {
    const res = await this.getTableList()
    this.tableData = res.data || []
  }

  public handlerAdd() {
    this.tableAdd()
    this.visibleTitle = '添加新的批次'

    // this.tableData.push({
    //   batch_id: '',
    //   batch_type: '2',
    //   batch_num: ''
    // })
    // console.log(this.tableData)
  }

  public handlerEdit() {

  }

  public handlerDel(row: any, index: number) {
    // if (!row.batch_id)
    this.tableDel(row)
  }
}
</script>

<style scoped lang="less">
.action-button {
  margin: 0px 10px 0px 10px;
}
.form-item-class {
  margin-bottom: 0px;
}
.img-box {
  width: 100px;
  height: 100px;
  margin: 10px;
}
.item-blue {
  color: #1989fa;
}
.title {
  display: flex;
  justify-content: space-between;
  span {
    font-weight: bold;
  }
}
</style>
